<template>
  <div id="index">
    <div class="row">
      <div class="col col-1">
        <div class="row">
          <state-station></state-station>
        </div>
      </div>
      <div class="col col-2">
        <div class="row">
          <regional-overview></regional-overview>
        </div>
      </div>
      <div class="col col-3"></div>
      <div class="col col-4">
        <div class="row">
          <project-description></project-description>
        </div>
      </div>
      <div class="col col-5">
        <div class="row">
          <weather></weather>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import StateStation from "./StateStation";
import RegionalOverview from "./RegionalOverview";
import ProjectDescription from "./ProjectDescription";
import Weather from "./Weather";

export default {
  components: {
    StateStation,
    RegionalOverview,
    ProjectDescription,
    Weather
  }
};
</script>

<style lang="stylus" scoped>
#index
    position relative
    width 100%
    height 100%
    z-index 9

    > .row
        margin-left 390px
        width 5370px
        height 100%

        > .col
            height 100%

            > .row
                height 100%
                padding 0 40px

        > .col-1
            width 690px

        > .col-2
            width 980px

        > .col-3
            width 1580px

        > .col-4
            width 1020px

        > .col-5
            width 1090px

#index::before
    content ''
    position absolute
    width 5760px
    height 100%
    background url("../../assets/img/index/20190922083749.jpg") no-repeat top left
    background-size 5760px 1080px
    z-index -1
</style>
